<template>
  <base-breadcrumb :title="$route.meta.title">
    <a-spin :spinning="loading">
      <a-card
        v-if="editModel == 2 || highlight.highlightLevelCode !== '3'"
        :bordered="false"
      >
        <a-form-model
          ref="ruleForm"
          :model="projectInfo"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
          :rules="editModel == 0 ? {} : rules"
        >
          <!-- 项目信息 -->
          <div class="mb20">
            <title-name title="项目信息" />
            <a-row>
              <a-col
                v-if="editModel == 2"
                :span="16"
              >
                <a-form-model-item
                  label="所属单位"
                  prop="projectId"
                >
                  <org-tree-select
                    v-model="projectInfo.projectId"
                    check-strictly
                    notIsAutoSelectFirst
                    is-need-auth
                    @input="isProjectIdFn"
                    @select="selectOrg"
                  />
                </a-form-model-item>
              </a-col>
              <a-col
                v-else
                :span="16"
              >
                <a-form-model-item
                  label="所属单位"
                  prop="branchCompanyId"
                >
                  <div
                    style="margin-top: -3px"
                  >
                    <span>{{ projectInfo.branchCompanyName }}</span><span v-if="highlight.highlightLevelCode === '1'">
                      /{{ projectInfo.projectName }}
                    </span>
                  </div>
                </a-form-model-item>
              </a-col>
              <!--              <a-col-->
              <!--                v-if="editModel == 0 || editModel == 3"-->
              <!--                :xs="24"-->
              <!--                :sm="12"-->
              <!--                :md="8"-->
              <!--                :lg="8"-->
              <!--              >-->
              <!--                <a-form-model-item-->
              <!--                  label="分公司名称"-->
              <!--                  prop="branchCompanyId"-->
              <!--                >-->
              <!--                  <select-sub-company-->
              <!--                    v-model="projectInfo.branchCompanyId"-->
              <!--                    disabled-->
              <!--                  />-->
              <!--                  <select-sub-company-->
              <!--                    v-if="editModel != 0 && editModel != 3"-->
              <!--                    v-model="projectInfo.branchCompanyId"-->
              <!--                    :auto-selected="editModel == 2"-->
              <!--                    :disabled="editModel == 0 || editModel == 3"-->
              <!--                    @change="projectInfo.projectId && delete projectInfo.projectId"-->
              <!--                  />-->
              <!--                  <div-->
              <!--                    v-if="editModel == 0 || editModel == 3"-->
              <!--                    style="margin-top: -3px"-->
              <!--                  >-->
              <!--                    {{ projectInfo.branchCompanyName || '无' }}-->
              <!--                  </div>-->
              <!--                </a-form-model-item>-->
              <!--              </a-col>-->
              <!--              <a-col-->
              <!--                v-if="highlight.highlightLevelCode === '1'"-->
              <!--                :xs="24"-->
              <!--                :sm="12"-->
              <!--                :md="8"-->
              <!--                :lg="8"-->
              <!--              >-->
              <!--                <a-form-model-item-->
              <!--                  label="项目名称"-->
              <!--                  prop="projectId"-->
              <!--                >-->
              <!--                  <select-project-->
              <!--                    v-if="editModel != 0 && editModel != 3"-->
              <!--                    v-model="projectInfo.projectId"-->
              <!--                    :form="projectInfo"-->
              <!--                    :auto-selected="editModel == 2"-->
              <!--                    :disabled="editModel == 0 || editModel == 3"-->
              <!--                    :is-clear="false"-->
              <!--                    @change="highlight.subProject && delete highlight.subProject"-->
              <!--                  />-->
              <!--                  <div-->
              <!--                    v-if="editModel == 0 || editModel == 3"-->
              <!--                    style="margin-top: -3px"-->
              <!--                  >-->
              <!--                    {{ projectInfo.projectName || '无' }}-->
              <!--                  </div>-->
              <!--                </a-form-model-item>-->
              <!--              </a-col>-->
            </a-row>
          </div>
        </a-form-model>
      </a-card>
      <!-- 质量亮点信息 -->
      <a-card :bordered="false">
        <title-name title="质量亮点信息" />
        <a-form-model
          ref="ruleForm3"
          :model="highlight"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
          :rules="editModel == 0 ? {} : rules"
        >
          <div>
            <a-row>
              <!-- 亮点名称 -->
              <a-col
                :xs="24"
                :sm="12"
                :md="8"
                :lg="8"
              >
                <a-form-model-item
                  label="亮点名称"
                  prop="highlightName"
                >
                  <BaseInput
                    v-model="highlight.highlightName"
                    :disabled="editModel == 0 || editModel == 3"
                  />
                </a-form-model-item>
              </a-col>
              <!-- 亮点分类 -->
              <a-col
                :xs="24"
                :sm="12"
                :md="8"
                :lg="8"
              >
                <a-form-model-item
                  label="亮点分类"
                  prop="highlightTypeId"
                >
                  <selector
                    v-model="highlight.highlightTypeId"
                    select-type="8"
                    :disabled="editModel == 0 || editModel == 3"
                    placeholder="请选择"
                  />
                </a-form-model-item>
              </a-col>
              <!-- 施工时间 -->
              <!-- <a-col v-if="editModel != 2" :xs="24" :sm="12" :md="8" :lg="8">
                <a-form-model-item label="施工时间" prop="constructionTime">
                  <a-range-picker
                    :disabled="editModel == 0"
                    v-model="highlight.constructionTime"
                    valueFormat="YYYY-MM-DD"
                  ></a-range-picker>
                </a-form-model-item>
              </a-col> -->
              <!-- 填报时间 -->
              <a-col
                :xs="24"
                :sm="12"
                :md="8"
                :lg="8"
              >
                <a-form-model-item label="填报时间">
                  <a-date-picker
                    v-model="highlight.checkTime"
                    disabled
                    value-format="YYYY-MM-DD"
                  />
                </a-form-model-item>
              </a-col>
              <!-- 填报人 -->
              <a-col
                :xs="24"
                :sm="12"
                :md="8"
                :lg="8"
              >
                <a-form-model-item label="填报人">
                  <BaseInput
                    v-if="editModel == 0"
                    v-model="highlight.fillerName"
                    disabled
                  />
                  <BaseInput
                    v-else
                    v-model="highlight.checkPeopleId"
                    disabled
                  />
                </a-form-model-item>
              </a-col>
              <!-- 分项工程 -->
              <a-col
                :xs="24"
                :sm="12"
                :md="8"
                :lg="8"
              >
                <a-form-model-item
                  label="分项工程"
                  prop="subProjectId"
                >
                  <div
                    v-if="(editModel == 0 || editModel == 3) && !highlight.subProjectId"
                    style="margin-top: -2px"
                  >
                    无
                  </div>
                  <select-tree-sub-item
                    v-else
                    v-model="highlight.subProjectId"
                    :project-id="projectInfo.projectId"
                    :disabled="editModel == 0 || editModel == 3"
                  />
                </a-form-model-item>
              </a-col>
              <a-col
                v-if="$currentPost().code === 'CO' || $currentPost().code === 'BC'"
                :xs="24"
                :sm="12"
                :md="8"
                :lg="8"
              >
                <a-form-model-item
                  label="是否纳入质量月报"
                  prop="monthReportValue"
                >
                  <a-switch
                    v-model="highlight.monthReportValue"
                    style="margin-top: -3px"
                    checked-children="on"
                    un-checked-children="off"
                    :disabled="editModel == 0 || editModel == 3"
                    @change="
                      (e) => {
                        highlight.monthReport = e ? 1 : 0
                      }
                    "
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <!-- 现场照片 -->
              <a-col :span="24">
                <a-form-model-item
                  label="现场照片"
                  :label-col="{ lg: 2, md: 3, sm: 3 }"
                  :wrapper-col="{ lg: 22, md: 21, sm: 21 }"
                  prop="fileArrays"
                >
                  <span v-if="editModel == 0 && (!highlight.fileArrays || highlight.fileArrays.length < 1)">
                    <empty description="暂未上传现场图" />
                  </span>
                  <div v-else>
                    <upload-list
                      :is-multiple="true"
                      upload-type="image"
                      :business-code="'QM01'"
                      :disabled="editModel == 0 || editModel == 3"
                      :edit-model="editModel"
                      :upload-arrys.sync="highlight.fileArrays"
                      multiple
                      isUploadImgAndVideo
                    />
                  </div>
                </a-form-model-item>
              </a-col>
            </a-row>
            <!-- <a-row>
              <a-col :xs="24" :sm="12" :md="8" :lg="8">
                <a-form-model-item label="亮点等级" prop="highlightLevelId">
                  <selector selectType="1" :disabled="editModel != 2" v-model="highlight.highlightLevelId" />
                </a-form-model-item>
              </a-col>
            </a-row> -->
            <a-row>
              <a-col :span="24">
                <!-- 亮点描述 -->
                <a-form-model-item
                  label="亮点描述"
                  :label-col="{ lg: 2, md: 3, sm: 3 }"
                  :wrapper-col="{ lg: 22, md: 21, sm: 21 }"
                  prop="highlightDescription"
                >
                  <BaseTextarea
                    v-model="highlight.highlightDescription"
                    :rows="6"
                    :disabled="editModel == 0"
                    placeholder="请输入"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>
        </a-form-model>
      </a-card>
      <!-- 质量检查信息 -->
      <a-card
        v-if="false && editModel != 2 && checkInfo && checkInfo.checkNumber"
        :bordered="false"
        style="margin-bottom: 50px"
      >
        <a-form-model
          ref="ruleForm2"
          :model="checkInfo"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
          :rules="editModel == 0 ? {} : rules"
        >
          <div class="mb20">
            <title-name title="质量检查信息" />
            <div>
              <a-row>
                <a-col
                  :xs="24"
                  :sm="12"
                  :md="8"
                  :lg="8"
                >
                  <a-form-model-item label="质量检查编号">
                    <BaseInput
                      v-model="checkInfo.checkNumber"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
                <a-col
                  :xs="24"
                  :sm="12"
                  :md="8"
                  :lg="8"
                >
                  <a-form-model-item label="分项工程">
                    <div
                      v-if="(editModel == 0 || editModel == 3) && !checkInfo.subProject"
                      style="margin-top: -2px"
                    >
                      无
                    </div>
                    <BaseInput
                      v-else
                      v-model="checkInfo.subProject"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
                <a-col
                  :xs="24"
                  :sm="12"
                  :md="8"
                  :lg="8"
                >
                  <a-form-model-item label="检查结果">
                    <BaseInput
                      v-model="checkInfo.checkResultName"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
                <a-col
                  :xs="24"
                  :sm="12"
                  :md="8"
                  :lg="8"
                >
                  <a-form-model-item label="填报人">
                    <BaseInput
                      v-model="checkInfo.checkPeople"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
                <a-col
                  :xs="24"
                  :sm="12"
                  :md="8"
                  :lg="8"
                >
                  <a-form-model-item label="填报时间">
                    <BaseInput
                      v-model="checkInfo.checkTime"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
                <a-col
                  :xs="24"
                  :sm="12"
                  :md="8"
                  :lg="8"
                >
                  <a-form-model-item label="检查类型">
                    <BaseInput
                      v-model="checkInfo.checkTypeName"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
                <a-col
                  :xs="24"
                  :sm="12"
                  :md="8"
                  :lg="8"
                >
                  <a-form-model-item label="检查区域">
                    {{checkInfo.checkAreaName || '' }}
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="24">
                  <a-form-model-item
                    label="现场照片"
                    :label-col="{ lg: 2, md: 3, sm: 3 }"
                    :wrapper-col="{ lg: 22, md: 21, sm: 21 }"
                  >
                    <span v-if="editModel == 0 && (!checkInfo.fileArrays || checkInfo.fileArrays.length < 1)">
                      <empty description="暂未上传现场图" />
                    </span>
                    <div v-else>
                      <upload-list
                        upload-type="image"
                        :business-code="'QM01'"
                        :disabled="editModel == 0 || editModel == 3"
                        :edit-model="editModel"
                        :upload-arrys.sync="checkInfo.fileArrays"
                        isUploadImgAndVideo
                        multiple
                      />
                    </div>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row v-if="checkInfo.checkRecords">
                <a-col :span="24">
                  <a-form-model-item
                    label="检查记录"
                    :label-col="{ lg: 2, md: 3, sm: 3 }"
                    :wrapper-col="{ lg: 22, md: 21, sm: 21 }"
                  >
                    <BaseTextarea
                      v-model="checkInfo.checkRecords"
                      :rows="6"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
          </div>
        </a-form-model>
      </a-card>
    </a-spin>
    <!-- 页脚操作栏 -->
    <div class="btn_box page-btn-right-top">
      <a-button
        v-if="editModel != 0"
        :loading="loading"
        type="primary"
        class="button_right"
        @click="handleCheck"
      >
        提交
      </a-button>
      <a-button
        type="primary"
        @click="handleClose"
      >
        关闭
      </a-button>
    </div>
  </base-breadcrumb>
</template>

<script>
import UploadList from '@/components/UploadList' // 图片上传
import { Empty } from 'ant-design-vue' // 无数据提示
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目名称
import SelectTreeSubItem from '@/components/Select/SelectTreeSubItem' // 分部分项
import Selector from '@/components/Select/Selector' // 项目名称
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import { highlight } from '@/api/quality/quality' // api
import Vue from 'vue'

export default {
  name: 'a' + Date.now(),
  extends: new BaseEditPage(),
  components: {
    UploadList,
    Empty,
    SelectSubCompany,
    SelectProject,
    Selector,
    SelectTreeSubItem
  },
  data() {
    return {
      userInfo: {}, // 表单
      checkInfo: null, //质量检查信息
      highlight: {}, //质量问题信息
      projectInfo: {}, //项目信息
      loading: false, // 提交按钮loading控件
      rules: {
        //branchCompanyId,projectId,subProject,checkPeople,checkType,checkArea
        branchCompanyId: [{ required: true, message: '请选择分公司', trigger: 'change' }],
        // projectId: [{ required: true, message: '请选择项目名称', trigger: 'change' }],
        // subProject: [{ required: true, message: '请选择分项工程', trigger: 'change' }],
        checkResult: [{ required: true, message: '请选择检查结果', trigger: 'change' }],
        checkType: [{ required: true, message: '请选择检查类型', trigger: 'change' }],
        highlightName: [{ required: true, whitespace: true, message: '请输入亮点名称', trigger: 'change' }],
        highlightDescription: [{ required: true, whitespace: true, message: '请输入亮点描述', trigger: 'change' }],
        highlightLevelId: [{ required: true, message: '请选择亮点等级', trigger: 'change' }],
        highlightTypeId: [{ required: true, message: '请选择亮点分类', trigger: 'change' }],
        constructionTime: [{ type: 'array', required: true, message: '请选择施工时间', trigger: 'change' }],
        fileArrays: [{ type: 'array', required: true, message: '请上传现场照片', trigger: 'change' }],
        rectificationDescription: [{ required: true, whitespace: true, message: '请输入整改描述', trigger: 'change' }]
      }, // 校验规则
      init: false,
      //是否有项目
      isProjectId:false,
    }
  },
  props: {
    isAudit: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    'highlight.fileArrays'(e) {
      if (this.editModel != 0 && this.init) {
        this.$nextTick(() => {
          this.$refs.ruleForm3?.validateField('fileArrays')
        })
      }
    },
    isAudit: {
      handler() {
        this.editModel = 0
      },
      immediate: true
    }
  },
  methods: {
    selectOrg(val) {
      this.projectInfo.branchCompanyId = val[val.length - 2].orgId
      this.highlight.subProject && delete this.highlight.subProject
    },
    // 校验表单
    handleCheck() {
      if(this.$refs.ruleForm) {
        this.$refs.ruleForm?.validate((valid) => {
           if(valid) {
             this.$refs.ruleForm3?.validate((valid2) => {
               if(valid2) {
                 this.handleSubmit()
               } else {
                 this.$message.warning("请填写完所有必填项信息")
               }
             })
           }else {
             this.$message.warning("请填写完所有必填项信息")
           }
        })
      } else {
        this.$refs.ruleForm3?.validate((valid2) => {
          if(valid2) {
            this.handleSubmit()
          } else {
            this.$message.warning("请填写完所有必填项信息")
          }
        })
      }
    },
    // 提交表单
    handleSubmit() {
      let that = this
      if (that.editModel != '1') {
        that.$confirm({
          title: '温馨提示',
          content: '确认提交，提交后不可撤回？',
          onOk: () => {
            return that.submit()
          }
        })
      } else {
        that.submit()
      }
    },
    isProjectIdFn(val){
      this.isProjectId = val?true:false;
    },
    submit() {
      let that = this
      let name = ['update', 'create', 'pickHighlight'][that.editModel - 1] // 动态取得api请求方法
      let form = {
        highlight: that.highlight,
        projectInfo: that.projectInfo,
        checkInfo: that.checkInfo
      }
      // 若是有业务id则添加id
      if (that.id) {
        form.id = that.id
      }
      // 若是摘取则添加当前登录人岗位对应亮点等级id
      if (that.editModel == '3') {
        form.loginHighlightLevelId = that.level
        form.projectInfo.branchCompanyId = that.$currentPost().id
      }
      // 加载框
      that.loading = true
      return highlight[name](form)
        .then((res) => {
          // 取消加载框
          that.loading = false
          if (res.code === 200 || res.data.code === 200) {
            that.$message.success(['编辑', '添加', '摘取'][that.editModel - 1] + '成功！')
            // 关闭当前页
            that.$multiTab.close()
          }
        })
        .catch(() => {
          // 取消加载框
          that.loading = false
        })
    },
    // 关闭
    handleClose() {
      // 关闭当前页
      this.$multiTab.close()
    },
    initForm() {
      this.loading = true
      highlight
        .getDetail({ id: this.id })
        .then((res) => {
          this.loading = false
          if (res.code == 200) {
            let form = res.data
            this.checkInfo = form.checkInfo || {}
            this.highlight = Object.assign({}, { checkPeople: this.userInfo.id, checkPeopleId: this.userInfo.employee.name, monthReportValue: !!form.highlight.monthReport }, form.highlight) || {
              checkPeople: this.userInfo.id,
              checkPeopleId: this.userInfo.employee.name
            }
            if (this.highlight.checkTime) {
              this.highlight.checkTime = this.moment(this.highlight.checkTime)?.format('YYYY-MM-DD')
            } else {
              delete this.highlight.checkTime
            }
            this.projectInfo = form.projectInfo || {}
            this.$nextTick(() => {
              this.init = true
            })
            // console.log(this.highlight)
            // this.problemRectification = form.problemRectification || []
          }
        })
        .catch((res) => {
          this.loading = false
        })
    }
  },
  mounted(e) {
    this.$route.meta.title = ['质量亮点详情', '质量亮点编辑', '质量亮点新增', '质量亮点摘取'][this.editModel]
    this.userInfo = Vue.getAcloudProvider().getUserInfo()
    this.$nextTick(() => {
      if (this.editModel != 2) {
        // 设置表单对象
        this.initForm()
      } else {
        this.highlight = Object.assign(
          {},
          { monthReport: 0, monthReportValue: false, checkPeople: this.userInfo.id, checkPeopleId: this.userInfo.employee.name },
          { checkTime: this.moment(new Date()).format('YYYY-MM-DD') }
        )
        this.$nextTick(() => {
          this.init = true
        })
      }
    })
  }
}
</script>
